<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心 - 声破天音乐</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/help.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="liked-songs.css">
</head>
<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="25" cy="25" r="20" fill="#1DB954" />
                    <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2" fill="none" />
                    <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2" fill="none" />
                    <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2" fill="none" />
                    <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white">声破天</text>
                </svg>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span>首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span>搜索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span>探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span>音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> 创建播放列表</h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
        <div class="card">
    <div class="card-img liked-songs-card">
        <div class="liked-gradient">
            <i class="fas fa-heart"></i>
        </div>
        <div class="liked-overlay"></div>
        <div class="songs-counter">32首歌曲</div>
        <button class="play-button"><i class="fas fa-play"></i></button>
    </div>
    <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
    <p data-i18n="playlist">播放列表</p>
</div>
    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span>登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span>注册</span></a>
                    </div>
                </div>
            </header>

            <!-- 帮助中心内容 -->
            <div class="content-container help-container">
                <div class="help-header">
                    <h1 class="help-title">帮助中心</h1>
                    <p class="help-description">遇到问题了吗？浏览我们的帮助文章或搜索您需要的帮助。我们在这里为您提供支持。</p>
                </div>

                <div class="search-box">
                    <form class="search-form">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索您的问题">
                    </form>
                </div>

                <div class="help-categories">
                    <div class="category-card">
                        <div class="category-icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <h3 class="category-name">账户与支付</h3>
                        <p class="category-description">管理您的账户、订阅计划和付款方式</p>
                    </div>

                    <div class="category-card">
                        <div class="category-icon">
                            <i class="fas fa-music"></i>
                        </div>
                        <h3 class="category-name">音乐与播放</h3>
                        <p class="category-description">解决音乐播放和音质相关的问题</p>
                    </div>

                    <div class="category-card">
                        <div class="category-icon">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <h3 class="category-name">应用与设备</h3>
                        <p class="category-description">在各种设备上使用声破天音乐</p>
                    </div>

                    <div class="category-card">
                        <div class="category-icon">
                            <i class="fas fa-crown"></i>
                        </div>
                        <h3 class="category-name">会员服务</h3>
                        <p class="category-description">了解会员特权及相关服务</p>
                    </div>

                    <div class="category-card">
                        <div class="category-icon">
                            <i class="fas fa-share-alt"></i>
                        </div>
                        <h3 class="category-name">分享与社交</h3>
                        <p class="category-description">分享音乐和与好友互动</p>
                    </div>

                    <div class="category-card">
                        <div class="category-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3 class="category-name">隐私与安全</h3>
                        <p class="category-description">保护您的账户和个人信息</p>
                    </div>
                </div>

                <div class="faq-section">
                    <h2 class="faq-title">常见问题</h2>
                    <div class="faq-list">
                        <div class="faq-item active">
                            <div class="faq-question">
                                如何升级到高级会员？ <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                您可以通过点击个人资料中的"升级到高级会员"按钮进行升级。我们提供多种支付方式，包括微信支付、支付宝和银行卡。升级后，您将立即享受到高品质音乐、无广告体验以及更多专属特权。
                            </div>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">
                                如何创建和管理播放列表？ <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                在左侧导航栏中，点击"创建播放列表"即可创建新的播放列表。您可以通过拖放歌曲或使用"添加到播放列表"选项来添加歌曲。要管理播放列表，只需右键点击播放列表，然后选择"编辑"、"删除"或其他选项。
                            </div>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">
                                如何下载音乐进行离线收听？ <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                高级会员可以下载音乐进行离线收听。在手机APP上，只需点击歌曲或播放列表旁边的下载图标即可。下载的音乐将保存在"您的音乐库"的"下载"部分，即使没有网络连接，您也可以收听这些内容。
                            </div>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">
                                如何调整音质设置？ <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                您可以在设置中调整音质。进入"设置 > 音乐品质"，然后选择您喜欢的流媒体和下载质量。高级会员可以选择更高的音质选项，包括超高品质和无损音质，提供最佳的听觉体验。
                            </div>
                        </div>

                        <div class="faq-item">
                            <div class="faq-question">
                                忘记密码怎么办？ <i class="fas fa-chevron-down"></i>
                            </div>
                            <div class="faq-answer">
                                如果您忘记了密码，可以在登录页面点击"忘记密码"链接。输入您的注册邮箱或手机号码，我们将发送密码重置链接给您。请按照邮件中的说明重新设置密码，然后使用新密码登录您的账户。
                            </div>
                        </div>
                    </div>
                </div>

                <div class="contact-section">
                    <h2 class="contact-title">需要更多帮助？</h2>
                    <p class="contact-description">如果您找不到所需的信息，请联系我们的客户支持团队。我们很乐意为您提供帮助。</p>
                    <button class="contact-button">联系我们</button>
                </div>

                <div class="help-footer">
                    <p>声破天音乐 © 2024 版权所有</p>
                </div>
            </div>
        </main>
    </div>

    <!-- 播放器栏 -->
    <div class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image">
                    <img src="assets/images/covers/cover2.jpg" alt="当前播放">
                </div>
                <div class="track-details">
                    <div class="track-name">选择歌曲开始播放</div>
                    <div class="artist-name">声破天音乐</div>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <div class="current-time">0:00</div>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <div class="total-time">0:00</div>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // FAQ展开收起功能
            const faqItems = document.querySelectorAll('.faq-item');
            
            faqItems.forEach(item => {
                const question = item.querySelector('.faq-question');
                
                question.addEventListener('click', () => {
                    // 切换当前FAQ的active状态
                    item.classList.toggle('active');
                });
            });

            // 分类卡片点击效果
            const categoryCards = document.querySelectorAll('.category-card');
            
            categoryCards.forEach(card => {
                card.addEventListener('click', () => {
                    // 这里可以添加页面跳转或其他交互
                    console.log('Category clicked:', card.querySelector('.category-name').textContent);
                });
            });

            // 联系我们按钮点击效果
            const contactButton = document.querySelector('.contact-button');
            
            contactButton.addEventListener('click', () => {
                // 这里可以添加弹出表单或跳转到联系页面
                console.log('Contact button clicked');
            });
        });
    </script>
</body>
</html> 